Webアプリケーションで大量のデータを扱う際、一覧画面から詳細画面に遷移して1件ずつ編集する方法では、作業効率が低下する場合があります。できれば一覧画面上で編集したい、かつ、使い慣れているExcelのようなグリッド形式で、というご要望を開発現場でよく耳にします。
OutSystemsは、Webアプリケーションを高速開発できるローコードプラットフォームです。本記事では、OutSystemsでの開発において、グリッド形式でデータを直接編集できる「OutSystems Data Grid(以下Data Grid)」についてご紹介します。
1. Data Gridとは
Data Gridは、Excelのようなグリッド形式でデータを操作できるコンポーネントです。Webアプリケーションの画面で直接値を変更したり、行単位でデータを追加・削除したりできます。Excelのような操作感を実現でき、データのグルーピングやセルの結合、データの並び替えも行うことができます。
OutSystems社の公式なForge（注1）に提供されており、サンプルアプリやドキュメントが充実している点も、開発者にとって大きな利点です。
注1：OutSystems platform上で利用できる、再利用可能なオープンソースコンポーネントやアプリケーションのマーケットプレイス
参考：OutSystems社Forgeのコンポーネントの紹介(公式サイト) Forge OutSystems Data Grid
2. Data Gridの便利機能
Data Gridには様々な便利機能が用意されています。以下に主な機能を紹介します。(表1)
表1
| 機能 | 設定方法 |
|
エンティティ内からカラムを選択してGrid内に表示 |
Gridウィジェット内、GridColumnsPlaceholderに、表示させたいカラムの数だけ適切なColumnウィジェットを追加 |
| セルの結合 | クライアントアクション内、MergeColumnCellsアクションを使用して結合 |
| 列の表示/非表示の切り替え | 列のVisibleプロパティを設定 |
| 列の幅変更 | 表のAllowColumnResizeまたは列のAllowResizeプロパティを設定 |
| 列の並び替え | 表のAllowColumnReorderまたは列のAllowReorderプロパティを設定 |
| 集計表示 | Columns\CalculatedColumnウィジェットを使用 |
| サーバーサイドページネーション | 表のServerSidePaginationプロパティを設定、表のRowsPerPageプロパティで行数を設定 |
| クリックされた行のイベント検知 | Columns\ActionColumnウィジェットを使用、Handlerプロパティを設定してクリック時のアクションを設定 |
| Excel、CSVへのエクスポート | Gridウィジェット内ContextMenuPlaceholderにContext\MenuItemを追加 |
上記は用意された機能の一例で、細かい機能を含めればさらに多くの機能が用意されています。
参考：OutSystems社ドキュメント(公式サイト) OutSystems Data Grid
3. テーブルウィジェットとの比較
Data Gridと似たようなUIパーツとして、OutSystemsの標準UIパーツであるテーブルウィジェットがあります。そのテーブルウィジェットとData Gridを比較した場合と(表2)、Data Gridのメリットとデメリットについてまとめました。
表２
| 比較項目 | Data Grid | テーブルウィジェット |
|
Excelからのコピー＆ペースト |
可能 | 不可 |
| データ編集方法 | 同一画面で編集可能 | 別途、編集画面が必要 |
| ページネーション実装 | プロパティの設定のみ | 変数や取得件数の管理が必要 |
| JavaScriptでの拡張性 | テーブルウィジェットに比べて使用できるAPIが豊富 | OutSystemsの標準機能に準拠した、基本的な要素操作が中心 |
| 実装難易度 | 標準機能に加えてJSONや独自プロパティ知識が必要 | OutSystemsの標準機能のみで実装可能 |
| UIの統一感 | 調整が必要な場合があり(Forge部品の為) | 保ちやすい(標準部品の為) |
| カスタマイズ時の保障 | 標準的な動作の対象外 | 標準的な動作の対象内 |
Data Gridを使用するメリット
- 作業効率の向上：使い慣れたExcelのような操作感で、データの一括入力や編集が可能になる。
- スムーズなユーザー体験：一覧画面でそのまま編集できるため、画面遷移のストレスなく直感的にデータを操作できる。
- 開発工数の削減と高い拡張性：ページネーションなどが簡単に実装できる一方、APIを利用した高度な独自機能の追加にも対応可能。
Data Gridを使用するデメリット
- 学習コストの高さ：標準機能に加えて独自の知識が求められるため、習熟には一定の時間が必要。
- 保守性とガバナンスのリスク：Forgeコンポーネントであるため、UIの統一や、独自カスタマイズ部分の長期的な保守に配慮が必要。
様々なメリットデメリットがありますが、Data Gridの最大のメリットは、Excelライクなデータ編集画面を作成できる点です。しかし機能が多いゆえに、実装難易度が上がってしまいます。「大容量のデータを扱いたい」や「画面の操作をExcelのように行いたい」というご要望がある場合は、Data Gridの使用を検討してみるとよいでしょう。一方で、これらの機能が不要な場合は、実装がよりシンプルな標準のテーブルウィジェットの利用をおすすめします。
4. 最後に
ここまで、簡単ではありますがData Gridの主な機能と利用にあたってのメリット、デメリットを紹介しました。この記事でご紹介したのはData Gridが持つ機能のごく一部ですが、テーブルウィジェットよりも多機能な表を実装することもできます。
Data Gridの具体的な実装方法については、次回「チュートリアル編」で実際のスクリーンショットとともに詳しく解説いたします。あわせてご覧ください。この記事が、Data Gridの実装を検討されている方のお役に立てば幸いです。
tdiはローコード開発に力を入れていますので、こちらにお気軽にお問い合わせください。
OutSystems® とロゴはOutSystems-Software Em Rede S.A.の登録商標です。
執筆者プロフィール
- tdi OutSystems推進室
- OutSystemsの持つ奥深さに、日々エンジニアとしての探求心を刺激されています。仕事の楽しさを感じながら、これからも学び続ける姿勢を大切にしていきたいです。
